'use client';

import { useState } from 'react';
import Image from 'next/image';
import AnimatedBackground from '../components/AnimatedBackground';

export default function ResetPasswordPage() {
  const [email, setEmail] = useState('');
  const [verificationCode, setVerificationCode] = useState('');
  const [newPassword, setNewPassword] = useState('');
  const [isSendingCode, setIsSendingCode] = useState(false);
  const [countdown, setCountdown] = useState(0);
  const [step, setStep] = useState(1); // 1: 输入邮箱, 2: 输入验证码和新密码

  const handleSendCode = async () => {
    if (!email || !email.includes('@')) return;
    
    setIsSendingCode(true);
    // TODO: 实现发送验证码的API调用
    
    // 开始倒计时
    setCountdown(60);
    const timer = setInterval(() => {
      setCountdown((prev) => {
        if (prev <= 1) {
          clearInterval(timer);
          setIsSendingCode(false);
          return 0;
        }
        return prev - 1;
      });
    }, 1000);

    // 发送成功后进入第二步
    setStep(2);
  };

  const handleResetPassword = async (e: React.FormEvent) => {
    e.preventDefault();
    
    if (step === 1) {
      handleSendCode();
      return;
    }

    // TODO: 实现重置密码API调用
    console.log('重置密码信息:', { email, verificationCode, newPassword });
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 relative overflow-hidden">
      <AnimatedBackground />
      <div className="max-w-md w-full space-y-8 p-8 rounded-lg shadow-lg relative z-10 backdrop-blur-sm 
        bg-gradient-to-br from-purple-500/90 via-indigo-500/90 to-purple-600/90 
        dark:from-purple-900/90 dark:via-indigo-900/90 dark:to-purple-950/90">
        {/* Logo */}
        <div className="flex flex-col items-center">
          <Image
            src="/LawyerAI-Logo.svg"
            alt="LawyerAI Logo"
            width={64}
            height={64}
            className="mb-4 dark:hidden"
          />
          <Image
            src="/LawyerAI-Logo-dark.svg"
            alt="LawyerAI Logo"
            width={64}
            height={64}
            className="mb-4 hidden dark:block"
          />
          <h2 className="text-2xl font-bold text-white">重置密码</h2>
          <p className="mt-2 text-sm text-gray-100">
            {step === 1 ? '请输入您的邮箱地址' : '请输入验证码和新密码'}
          </p>
        </div>

        {/* 重置密码表单 */}
        <form className="mt-8 space-y-6" onSubmit={handleResetPassword}>
          <div className="space-y-4">
            {/* 邮箱输入 */}
            <div>
              <label htmlFor="email" className="block text-sm font-medium text-white">
                邮箱地址
              </label>
              <div className="mt-1">
                <input
                  id="email"
                  name="email"
                  type="email"
                  required
                  disabled={step === 2}
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  className="appearance-none block w-full px-3 py-2 border border-blue-300 rounded-md 
                    shadow-sm placeholder-gray-400 
                    focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
                    bg-black/30 text-white backdrop-blur-sm
                    dark:border-blue-600 dark:placeholder-gray-500
                    disabled:opacity-50 disabled:cursor-not-allowed"
                  placeholder="请输入邮箱地址"
                />
              </div>
            </div>

            {step === 2 && (
              <>
                {/* 验证码输入 */}
                <div>
                  <label htmlFor="code" className="block text-sm font-medium text-white">
                    验证码
                  </label>
                  <div className="mt-1 flex space-x-3">
                    <input
                      id="code"
                      name="code"
                      type="text"
                      required
                      value={verificationCode}
                      onChange={(e) => setVerificationCode(e.target.value)}
                      className="flex-1 min-w-0 block w-full px-3 py-2 border border-blue-300 rounded-md 
                        shadow-sm placeholder-gray-400 
                        focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
                        bg-black/30 text-white backdrop-blur-sm
                        dark:border-blue-600 dark:placeholder-gray-500"
                      placeholder="请输入验证码"
                    />
                    <button
                      type="button"
                      onClick={handleSendCode}
                      disabled={isSendingCode || !email.includes('@')}
                      className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium 
                        rounded-md shadow-sm text-white 
                        bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700
                        focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
                        disabled:from-blue-400 disabled:to-blue-400 disabled:cursor-not-allowed
                        dark:from-blue-600 dark:to-blue-700 dark:hover:from-blue-700 dark:hover:to-blue-800"
                    >
                      {countdown > 0 ? `${countdown}秒后重试` : '重新发送'}
                    </button>
                  </div>
                </div>

                {/* 新密码输入 */}
                <div>
                  <label htmlFor="newPassword" className="block text-sm font-medium text-white">
                    新密码
                  </label>
                  <div className="mt-1">
                    <input
                      id="newPassword"
                      name="newPassword"
                      type="password"
                      required
                      value={newPassword}
                      onChange={(e) => setNewPassword(e.target.value)}
                      className="appearance-none block w-full px-3 py-2 border border-blue-300 rounded-md 
                        shadow-sm placeholder-gray-400 
                        focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
                        bg-black/30 text-white backdrop-blur-sm
                        dark:border-blue-600 dark:placeholder-gray-500"
                      placeholder="请输入新密码"
                    />
                  </div>
                </div>
              </>
            )}
          </div>

          <div>
            <button
              type="submit"
              className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm 
                text-sm font-medium text-white 
                bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700
                focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
                dark:from-blue-600 dark:to-blue-700 dark:hover:from-blue-700 dark:hover:to-blue-800
                transition-all duration-200 ease-in-out
                transform hover:scale-105"
            >
              {step === 1 ? '下一步' : '重置密码'}
            </button>
          </div>

          {/* 返回登录 */}
          <div className="text-center">
            <a href="/login" className="text-sm text-gray-100 hover:text-white">
              返回登录
            </a>
          </div>
        </form>
      </div>
    </div>
  );
}
